<template>
    <div class="home">
        <div class="topBox">
            <div class="navBox">
                <!-- @click="handleGOappraise" -->
                <div class="title" @click="handleGOappraise">
                    {{ $t('assemble.网易标签订购系统') }}<span style="margin-left: 5px;">V2.0</span>
                </div>
                <div class="imgBox">
                    <img class="messageimg" src="../../static/imgs/message.png" @click="handleMessage" alt="" srcset="">
                    <img v-if="lang == 'zh'" class="langimg" src="../../static/imgs/zhb.png" @click="handleChangelang"
                        alt="" srcset="">
                    <img v-if="lang == 'en'" class="langimg" src="../../static/imgs/enb.png" @click="handleChangelang"
                        alt="" srcset="">
                </div>
            </div>
        </div>
        <div style="height: 90px;"></div>

        <div v-if="dataList.length > 0" class="dataList">
            <div class="dataItem" v-for="(item, index) in dataList" @click="handleDetail(item.id)">
                <img class="productImg" :src="item.images[0]" alt="" srcset="">
                <div class="productMessage">
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <div class="value">
                        {{ $t('assemble.尺寸') }}： {{ item.size }}
                    </div>
                    <div class="value">
                        {{ $t('assemble.产品代号') }}：{{ item.code }}
                    </div>
                    <div class="value">
                        {{ $t('assemble.单位') }}：{{ item.unit }}
                    </div>
                </div>
            </div>
        </div>

        <div class="noData" v-if="dataList.length == 0" style="margin-top: 250px;width: 100%;text-align: center;">
            暂无商品
        </div>

        <div style="height: 90px;"></div>
        
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import Tabbar from '@/components/tabbar/index.vue';
import { progetlist } from '../../utils/api'
export default {
    components: {
        Tabbar
    },
    data() {
        return {
            lang: 'zh',
            dataList: [],
        }
    },
    created() {
        if (!localStorage.getItem('token')) {
            this.$router.push({ path: '/pages/login/index' })
        } else {
            this.$i18n.locale = localStorage.getItem('langtype')
            this.lang = localStorage.getItem('langtype')
            this.getDatalits()
        }

    },
    mounted() {
    },
    methods: {
        //商品列表
        async getDatalits() {
            let res = await progetlist()
            if (res.code = 1) {
                this.dataList = res.data.list
                this.dataList.forEach((item, index) => {
                    item.images = item.images.split(',')
                })
            }
        },
        handleChangelang() {
            if (this.$i18n.locale == 'en') {
                this.$i18n.locale = 'zh'
                this.lang = 'zh'

            } else {
                this.$i18n.locale = 'en'
                this.lang = 'en'

            }
            localStorage.setItem("langtype", this.$i18n.locale)
        },
        handleMessage() {
            this.$router.push({ path: '/pages/home/message' })
        },
        handleDetail(id) {
            this.$router.push({ path: '/pages/home/detail', query: { id } })
        },

        handleGOappraise() {
            // query: { c:"00000335abpvbpfapc" }
            this.$router.push({ path: '/valid', })
        },
    },

}
</script>

<style scoped lang="scss"> .home {
     width: 100%;
     min-height: 100vh;
     background-color: #F8F8F8;
 }

 @media screen and (max-width: 750px) {


     .topBox {
         width: 100%;
         // height: 156px;
         background: #E00000;
         padding: 30px 15px;
         box-sizing: border-box;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
         font-size: 16px;
         color: #FFFFFF;
         line-height: 19px;
         text-align: center;
         font-style: normal;
         text-transform: none;
         position: fixed;
         top: 0;

         .navBox {
             height: 30px;
             display: flex;
             align-items: center;
             justify-content: space-between;
         }

         .imgBox {
             width: 30%;
             display: flex;
             justify-content: space-between;
         }

         .messageimg {
             width: 24px;
             height: 24px;
         }

         .langimg {
             width: 56px;
             height: 30px;
         }
     }


     .dataList {
         width: 100%;

         .dataItem {
             display: flex;
             align-items: center;
             width: 100%;
             height: 130px;
             background: #FFFFFF;
             margin-top: 10px;
             padding: 15px;
             box-sizing: border-box;
             border-radius: 20px;
             // border: 1px solid red;

             .productImg {
                 width: 100px;
                 border-radius: 10px;
             }

             .productMessage {
                 margin-left: 10px;
                 height: 100px;
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;


                 .name {
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 400;
                     font-size: 14px;
                     color: #333333;
                     line-height: 16px;
                     text-align: justified;
                     font-style: normal;
                     text-transform: none;
                 }

                 .value {
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 400;
                     font-size: 12px;
                     color: #666666;
                     line-height: 14px;
                     text-align: left;
                     font-style: normal;
                     text-transform: none;
                 }
             }
         }
     }


 }

 @media screen and (min-width: 751px) and (max-width: 1300px) {
     .noData {
         font-size: 23px;
     }

     .topBox {
         width: 100%;
         // height: 300px;
         background: #E00000;
         padding: 60px 30px;
         // padding-top: 60px;
         box-sizing: border-box;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
         font-size: 26px;
         color: #FFFFFF;
         line-height: 19px;
         text-align: center;
         font-style: normal;
         text-transform: none;
         position: fixed;
         top: 0;

         .navBox {
             height: 50px;
             display: flex;
             align-items: center;
             justify-content: space-between;
         }


         .imgBox {
             width: 30%;
             display: flex;
             justify-content: space-between;
         }

         .messageimg {
             width: 42px;
             height: 42px;
         }

         .langimg {
             width: 100px;
             height: 50px;
         }
     }


     .dataList {
         width: 100%;
         margin-top: 120px;
         margin-bottom: 120px;

         .dataItem {
             display: flex;
             align-items: center;
             width: 100%;
             height: 260px;
             background: #FFFFFF;
             margin-top: 20px;
             padding: 30px;
             box-sizing: border-box;
             border-radius: 40px;
             // border: 1px solid red;

             .productImg {
                 width: 240px;
                 border-radius: 20px;

             }

             .productMessage {
                 margin-left: 30px;
                 height: 180px;
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;


                 .name {
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 400;
                     font-size: 23px;
                     color: #333333;
                     line-height: 30px;
                     text-align: justified;
                     font-style: normal;
                     text-transform: none;
                 }

                 .value {
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 400;
                     font-size: 18px;
                     color: #666666;
                     line-height: 25px;
                     text-align: left;
                     font-style: normal;
                     text-transform: none;
                 }
             }
         }
     }


 }
</style>